<template>
  <Dialog title="任务重呼" v-model="dialogHeavy" width="800">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="180px"
      v-loading="formLoading"
    >
      <el-form-item label="任务名称:" prop="name">
        <el-input v-model="formData.name" placeholder="请输入任务名称"></el-input>
      </el-form-item>
      <el-form-item label="坐席班组" prop="groupId">
        <el-select v-model="formData.groupId" placeholder="请选择坐席班组" style="width: 100%">
          <el-option
            v-for="item in groupOptions"
            :key="item.value"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="并发倍率(1-4)">
        <el-input-number v-model="formData.multiplier" :min="1" :max="4" />
      </el-form-item>
      <el-form-item label="呼叫结果选择" prop="typeList">
        <el-checkbox-group v-model="formData.typeList">
          <div v-for="scope in resultTypeMap" :key="scope.value">
            <el-checkbox :label="scope">
              {{ scope.label }}
            </el-checkbox>
          </div>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogHeavy = false">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup>
import * as TaskApi from '@/api/call/task'
import * as AgentApi from '@/api/call/agent'

const dialogHeavy = ref(false)
const formLoading = ref(false)
const formData = reactive({
  name: '',
  multiplier: null,
  groupId: null,
  typeList: [],
  id: null
})
const formRules = reactive({
  name: [
    {
      required: true,
      message: '请输入任务名称',
      trigger: 'blur'
    }
  ],
  groupId: [
    {
      required: true,
      message: '坐席班组不能为空',
      trigger: 'change'
    }
  ],
  typeList: [
    {
      required: true,
      message: '请选择呼叫结果',
      trigger: 'blur'
    }
  ]
})
const resultTypeMap = [
  { label: '呼叫成功', value: 1 },
  { label: '播放语音时挂断', value: 10 },
  { label: '播放语音完挂断', value: 11 },
  { label: '系统线路异常', value: 90 },
  { label: '黑名单或拦截', value: 91 },
  { label: '空号或号码错误', value: 92 },
  { label: '客户拒接或挂断', value: 93 },
  { label: '客户忙或未接听', value: 94 },
  { label: '坐席忙线未接听', value: 95 },
  { label: '呼叫失败', value: 99 }
]
const groupOptions = ref([])
/*打开*/
const open = async (id) => {
  dialogHeavy.value = true
  groupOptions.value = await AgentApi.groupSimple()
  getDetailObj(id)
}
/*获取任务详情*/
const getDetailObj = async (val) => {
  try {
    const { name, id, groupId, multiplier } = await TaskApi.getTask(val)
    Object.assign(formData, { name, id, groupId, multiplier })
  } catch {}
}
defineExpose({ open })
const formRef = ref(null)
const emit = defineEmits(['success'])
const submitForm = async () => {
  const valid = await formRef.value.validate()
  if (!valid) return
  try {
    formLoading.value = true
    const data = JSON.parse(JSON.stringify(formData))
    data.typeList = data.typeList.map((item) => item.value)
    await TaskApi.callRecall(data)
    ElMessage.success('操作成功')
    emit('success')
  } finally {
    formLoading.value = false
  }
}
</script>

<style lang="scss" scoped></style>
